import {createBrowserRouter,createHashRouter,Navigate,redirect}   from "react-router-dom";
import Layout from '@/layout/layout';
import ClassComponent from '@/views/classComponents/classParent';
import Classcomponents from "@/views/classComponents/2Class";
import UserState from "@/views/hooksComponents/useState";
import UseRef from "@/views/hooksComponents/useRef";
import UseTransition from "@/views/hooksComponents/useTransition";
import UseDefferredValue from "@/views/hooksComponents/useDefferredValue";
import Gouwuche from "@/views/gouwuche";
import Protals from "@/views/portal";
import AntMessage from "@/views/portal/antMessage.tsx";
import Lazy from "@/views/lazy";
import Errors from "@/views/errorBoundary/ErrorHandler.tsx";
import UseLoaderData from "@/views/react_router_dom/UseLoaderData";
import GlobalRouterGuard from "@/views/react_router_dom/GlobalRouterGuard";
import ReduxBase from "@/views/redux/example/base";
import React from "react";

export const routes = [
    {

        path: "/",
        element: <GlobalRouterGuard><Layout/></GlobalRouterGuard>,
        errorElement: <h1>全局404</h1>, // 全局404页面
        children: [
            {
              index: true,
              // element: <APP />,
              element:<Navigate to="/about"/> //重定向
            },
            {
                path: "about",
                element: <h1>About</h1>,
            },{
                path: "contact",
                element: <h1>Contact</h1>,
            },{
                path: "Class",
                element: <ClassComponent/>,
            },{
                path: "ClassS",
                element: <Classcomponents/>,
            },{
                path: "useState",
                element: <UserState />,
                children: [
                    {
                        path: "child1",
                        element: <h1>Child1</h1>,
                        meta:{title:"子路由1",auth:true}
                    },
                    {
                        path: "child2",
                        element: <h1>Child2</h1>,
                        meta: {title: "子路由2", auth: true}
                    },
                    {
                        path: "*",
                        element: <h1>局部404</h1>,
                        meta: {title: "子路由3", auth: true}
                    },
                ]
            },{
                path: "UseRef",
                element: <UseRef />,
            },{
                path: "UseTransition",
                element: <UseTransition />,
            },{
                path: "UseDefferredValue",
                element: <UseDefferredValue />,
            },{
                path: "UseLoaderData",
                element: <UseLoaderData />,
                loader: async () => {
                    const data = await fetch("https://jsonplaceholder.typicode.com/todos/1").then(res => res.json());
                    console.log(data);
                    if (data.id === 1){
                        return redirect("/login");
                    }
                    return data;
                }
            },{
                path: "gouwuche",
                element: <Gouwuche />,
            },{
                path: "protal",
                element: <Protals />,
            },{
                path: "AntMessage",
                element: <AntMessage />,
            },{
                path: "lazy",
                element: <Lazy />,
            },{
                path: "reduxBase",
                element: <ReduxBase />,
            },{
                path: "errorBoundary",
                element: <Errors />,
            }
        ]
    }]
const router = createBrowserRouter(routes)
export default router